<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="../../mytags.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <t:base type="jquery"></t:base>
    <script type="text/javascript" src="webpage/com/wx/added_product/procurement/shoppingCar.js"></script>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>购物车</title>
    <style>
        .gdd h3{
            margin-top:10px;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        $(function () {
            $('.mui-input-numbox').bind('change', function () {
                $(this).parent().parent().parent().find('.jiage').text(); //这里需要加单价跟$(this).value()相乘

            });

            $('.checkall').bind('click', function () {
                if ($(this).hasClass('checked')) {
                    $(this).removeClass('checked');
                    $('.checkbox1').removeClass('checked');
                    $('.checkbox1').prop('checked', false);
                } else { //没有选择到选择
                    $(this).addClass('checked');
                    $('.checkbox1').addClass('checked')
                    $('.checkbox1').prop('checked', true);
                }
                ;

            });

            $('.checkbox1')
                    .bind(
                            'click',
                            function () {
                                if ($(this).hasClass('checked')) { //取消选择
                                    $(this).removeClass('checked');
                                    $('.checkall').removeClass('checked')
                                    $('.checkall').prop('checked', false);

                                } else { //没有选择到选择
                                    $(this).addClass('checked');
                                    console.log($('.mui-clearfix .checked').size());
                                    console.log($(
                                            '.mui-clearfix input[type="checkbox"]')
                                            .size());
                                    if ($('.mui-clearfix .checked').size() == $(
                                                    '.mui-clearfix input[type="checkbox"]')
                                                    .size()) {
                                        $('.checkall').addClass('checked')
                                        $('.checkall').prop('checked', true);
                                    }
                                }
                                ;

                            });
            var bbb = $('.mui-clearfix .checked').size();

        });
    </script>
</head>
<body>
<div class="chanp chanpp" style="margin-top: 0; margin-bottom: 70px;">
    <ul id="carItems">
    </ul>
</div>
<script type="text/jTemplate" id="carItemsTemplate">
    {#foreach $T as Item begin 0}
    <li class="mui-clearfix">
        <div class=" mui-checkbox mui-left li_f mui-clearfix">
            <div style="width:35%;height:110px;float:left;padding: 5px 10px 0px 5px">
                <input name="checkbox" value="Item 1" type="checkbox" data-id="{$T.Item.id}"
                       style="top: 30px; left: 10px;" class="checkbox1" {$T.Item.checkStatus==1?"checked":""}>

                <img class="with-img-border" src="cbsPartInfoController.do?downLoadFile&filePath={$T.Item.partImg[0]}"
                     onclick="location.href='purchaseorderController.do?purchaseorder_con&id={$T.Item.part.id}'"
                     style="margin-left: 45px;padding:0;">
            </div>
            <div class="gd gdd" style="margin-left:30px;float:left;padding: 5px 10px 0px 5px;width:50%">
                <h2 class="mui-ellipsis-2" style="font-weight: bold">{$T.Item.partName}</h2>
                <h3 class="price-group">
                    <span class="jiage">¥{formatMoney(Number($T.Item.price),2)}</span>
					<span style="color:#fff;background-color:red;font-weight:500;font-size:0.9em;padding-left:3px;padding-right:1px;border:1px solid #fff">微信优惠价</span>
					<br/>
                    <span>¥{formatMoney(Number($T.Item.part.terminalPrice),2)}</span>
                </h3>
                <h3>
                    <span class="mui-numbox" data-numbox-min='1'
                            style="padding: 0 25px; width: 80px; height: 25px; color: #333;margin-left:0px;">
								<button class="mui-btn-numbox-minus" type="button"
                                        style="width: 25px;">-</button> <input
                        class="mui-input-numbox" type="number" style="font-size: 12px;" data-id="{$T.Item.part.id}"
                        value="{$T.Item.count}" readonly/>
								<button class="mui-btn-numbox-plus" type="button"
                                        style="width: 25px;">+</button>
							</span><img src="${webRoot }images/sanc.png" style="height:20px;border:none;margin-top:2px;"
                                        onclick="delCarItem('{$T.Item.part.id}',this)">
                </h3>
            </div>
        </div>
    </li>
    {#/for}
</script>
<div class="mui-checkbox car-footer">
    <input name="checkbox" value="Item" type="checkbox" class="checkall">
    <span class="qx">全选</span>
    <div class="footer-right">
        <div class="summary" id="partInfo">合计：<b></b></div>
        <div class="btn" onclick="goSettle()">结算</div>
    </div>
</div>
<%--<div class="mui-input-row mui-checkbox mui-left  quanx quanxx"
     style="height: 50px;border-radius: 0px;">
    <input name="checkbox" value="Item 1" type="checkbox" class="checkall">
    <h3>
        <span style="width: 40px; margin-left: -17px; font-size: 14px;">全选</span>
        <span id="partInfo">合计：<b></b></span> <a id="btnSettle"
            onclick="goSettle()" style="height: 30px; line-height: 30px;">结 算(<b></b>)</a>
    </h3>
</div>--%>
</body>
</html>

<script>
    //	$('.mui-btn-numbox-plus').

    function goSettle() {

        if ($(":checked").length == 0 || $(":checked").val() == 'Item') {
            mui.alert("请勾选欲购买的商品");
            return;
        }
        _Car.openSimpleWindow("shoppingcar.do?goBuy&invoiceId="+localStorage.getItem(_Car.STORAGEKEY.selectedInvoice));
    }

    function showCarInfo() {

        if (!$.isEmptyObject(_Car.getCarInfo())) {
            $("#carItems").setTemplate($("#carItemsTemplate").html()).processTemplate(_Car.getCarInfo().details);
            mui('.mui-numbox').numbox();
            initBar();
        }

        $("input[type='number']").change(function () {
            var _this = $(this);
            _Car.itemCountChange({
                id: _this.attr("data-id"),
                num: _this.val()
            }, function () {
                initBar();
            })
        })

        $(".checkbox1").click(function () {
            _Car.checkItem($(this).attr("data-id"), $(this).is(":checked"));
            initBar();
            _Car.handleCheckAll();
        })
    }

    function delCarItem(id, obj) {
        _Car.reduceItem({id: id, num: 0}, function () {
            showCarInfo();
        })
    }

    function initBar() {
        var data = _Car.getCarInfo();
//        $("#partInfo").children("b").eq(0).text(data.checkedCount);
        $(".btn").find("b").text(data.checkedCount)
        $("#partInfo").children("b").eq(0).text('¥' + formatMoney(data.checkedPrice,2));
        if ($("#carItems").find(":checked").length == $(".checkbox1").length) {
            $(".checkall").attr("checked", "checked");
        }

    }

    $(function () {

        $(".checkall").click(function () {
            $(".checkbox1").each(function () {
                _Car.checkItem($(this).attr("data-id"), $(this).is(":checked"));
            })
            initBar();
        })
        showCarInfo();

    })
</script>
</html>